Server-side rendering (SSR)

Bento uses react-aria internally. react-aria auto generates unique ids for some of Bento components.

To ensure the ids are consistent between the client and server in a SSR environment, you need to pass the ssr option to BentoProvider.

E.g.:

<BentoProvider defaultMessages={defaultMessages} ssr>
  <YourSsrApp />
</BentoProvider>

This will wrap all components in react-aria's SSRProvider. More info about SSR in react-aria here.

Alternatively, Bento also exposes SSRProvider directly, in the rare in case in which you want to use it separately from BentoProvider.